<template>
    <div class="wrapper"  :style="{height: mainHeight}">
        <image :src="imagePath" class="background"></image>
        <text class="logo">培优策</text>
        <div class="input-container" ref="container">
            <text class="hellow">欢迎登陆</text>
            <div class="hr-border black-bg" :style="{  marginTop:'25px'}"></div>
            <div class="formItem">
                <text class="icon-text" :style="{fontFamily: 'wxcIconFont'}">{{'\ue602'}}</text>
                <input class="input" @input="onUserNameChange" ref="mobile" placeholder="手机号" :value="mobile"/>
            </div>
            <div class="hr-border"></div>
            <div class="formItem">
                <text class="icon-text" :style="{fontFamily: 'wxcIconFont'}">{{'\ue601'}}</text>
                <input class="input" @input="onPWChange" type="password" ref="password" placeholder="密码"
                       :value="password"/>
            </div>
            <div class="hr-border"></div>
            <div class="button-list">
            <wxc-button text="登录" type="red"
                        :btn-style="{width:'216px', margin:'0px',height:'70px',borderRadius:'36px', backgroundColor: '#00BB9A'}"
                        @wxcButtonClicked="onLogin"></wxc-button>
            <wxc-button text="注册" type="red"
                        :textStyle="{color:'#00BB9A'}"
                        :btn-style="{width:'216px',margin:'0px',height:'70px',borderRadius:'36px', backgroundColor: '#ffffff',
                        borderColor:'#00BB9A',borderStyle:'solid', borderWidth: '1px'}"
                        @wxcButtonClicked="onRegister"></wxc-button>
            </div>
            <div class="hr-border"></div>
            <div @click="onRest" class="rest-password">忘记密码</div>

        </div>
        <loading-component height="1334"
                           width="750"
                           border-radius="0"
                           duration="100"
                           :has-overlay="true"
                           :show-close="false"
                           :show="isLoading"
                           :has-animation="true">
        </loading-component>
    </div>
</template>

<style lang="scss">
    .background {
        height: 1334px;
        width: 750px;
       position: absolute;
        top:0;
    }
    .hellow{
        display: -webkit-box;
        width:200px;
        height:60px;
        font-size:48px;
        font-weight:500;
        color:#00BB9A;
    }
    .rest-password{
        text-align: center;
        height:40px;
        font-size:24px;
        color:#A8B3C4;
        padding-top:10px
    }
    .button-list{
        width: 480px;
        height:190px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    @import '../config/styles.scss';

    .login-bottom {
        width: 550px;
        justify-content: space-between;
    }

    .formItem {
        flex-direction: row;
        margin-top: 30px;
    }

    .hr-border {
        width: 472px;
        height: 2px;
        background-color: #A8B3C4;

    }

    .wrapper {
        align-items: center;
        justify-content: center;
        width: 750px;
        height: 1334px;
        background-color: white;
    }

    .input-container {
        align-items: center;
        justify-content: center;
        width:622px;
        height:604px;
        background-color: white;
        box-shadow: $--box-shadow-color;
        border-radius:50px;
    }

    .input {
        font-size: 30px;
        width: 420px;
        border-radius: 12px;
        padding: 20px;
        color: $--input-color;
        align-items: center;
        justify-content: center;
        border: 0px;
        outline: none;
    }

    .icon-text {
        align-items: center;
        color: $--theme-color;
        justify-content: center;
        font-size: 55px;
        display: -webkit-box;
        margin-top: 10px;
        margin-right: 25px;
        overflow: hidden;
        white-space: normal !important;
        text-overflow: ellipsis;
        word-wrap: break-word;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }
</style>
<style scoped>

    .logo {
        width: 250px;
        height: 200px;
        align-items: center;
        justify-content: center;
        font-size:80px;
        color:#00BB9A;
        font-weight: bold;
    }
</style>
<script>
  import { WxcButton, WxcLoading, Utils } from 'weex-ui'
  import { isEmptyString } from '../core/common/commonUtils'
  import {  addIconFontSupport } from '../config/IconConfig'
  import LoadingComponent from './widget/LoadingComponent.vue'
  import * as Config from '../config/Config'

  const modal = weex.requireModule('modal')
  const dom = weex.requireModule('dom')
  const animation = weex.requireModule('animation')

  export default {
    components: {WxcButton, WxcLoading, LoadingComponent},
    data () {
      return {
        imagePath:'http://cdn.www.bright-tech.cn/PeiYouCe/31ab1304f4eaecef3cc1e7ca68099691/hH0Uxdjsa0LxggssT265cFJEwGhL8DOM4mKjjDwv.png',
        mobile: '13602045487',
        password: '111111',
        isLoading: false,
        loadingText: '处理中···',
        primaryColor: Config.primaryColor,
        mainHeight: 0,
      }
    },
    created: function () {
      // this.imagePath = getImagePath('bg', '.png')
      addIconFontSupport(dom, '../../')
      this.mainHeight = Utils.env.getScreenHeight()
    },
    methods: {
      onUserNameChange (event) {
        this.mobile = event.value
      },
      onPWChange (event) {
        this.password = event.value
      },
      onRegister () {
        this.reset('/register')
      },
      onRest () {
        this.reset('/rest')
      },
      onLogin () {
        let mobile = this.mobile
        let password = this.password
        if (isEmptyString(mobile)) {
            modal.toast({
                message: "手机号不能为空"
            });
            return
        }
        if (isEmptyString(password)) {
            modal.toast({message: "密码不能为空"});
            return
        }
        this.isLoading = true
        this.$store.dispatch('doLogin', {
          mobile: mobile,
          password: password,
          resultCallback: (res) => {
          this.isLoading = false
        if (res && res.data) {
          let containerEl = this.$refs[`container`]
          animation.transition(containerEl, {
            styles: {
              transform: `translateY(${Utils.env.getPageHeight()}px)`,
            },
            duration: 1000,
            'cubic-bezier': (0.25, 0.46, 0.45, 0.94),
            delay: 0,
          }, ()=> {
            this.reset('/main')
        })
        }
        console.info('resultCallback', res)
      }
      })
      },
    },
  }
</script>
